
import React, { Component } from 'react';

import {
    StyleSheet,
    View,
    Image,
    TouchableWithoutFeedback
} from 'react-native';

const Dimensions = require('Dimensions');
const { width } = Dimensions.get('window');
import {setSpText,setHW} from '../../../component/ScreenUtil';
import Swiper from 'react-native-swiper';

// api
import { listBanner } from '../../../api/home'

export default class Slider extends Component {
    constructor(props) {
        super(props);
        this.state = {
            // listBanners: []
        }
    }
    static defaultProps = {
        listBanner: []
    }
    
    render() {
        return (
            <View style={styles.viewContainer}>
                {this.props.listBanners.length > 0 ? <Swiper
                    style={styles.sliderContainer}
                    showsButtons={false}
                    loop
                    dotStyle={styles.dotStyle}
                    activeDotStyle={styles.activeDotStyle}
                    paginationStyle={{ bottom: 5 }}
                    autoplay={true}
                    autoplayTimeout={8}
                >
                    {
                        this.props.listBanners.map((item, index) => {
                            return (
                                <TouchableWithoutFeedback key={index} onPress={() => this.gotoAdv(item)}>
                                    <View style={styles.slideItem}>
                                        <Image style={styles.sliderImage} source={{ uri: item.PIC }} />
                                    </View>
                                </TouchableWithoutFeedback>
                            );
                        })
                    }
                </Swiper> : null}
            </View>
        )
    }
    gotoAdv(item) {
        // global.log(item, ' gotoAdv slider');
        if (item.URL) {
            this.props.navigation.navigate('AdvView', {
                advURL: item.URL
            })
        }
        else if (item.HTML) {
            this.props.navigation.navigate('AdvView', {
                htmlStr: item.HTML
            })
        }
    }
}

const styles = StyleSheet.create({
    viewContainer: {
        height: width / 750 * 220
    },
    sliderContainer: {
    },
    slideItem: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    sliderImage: {
        width: width,
        height: width / 750 * 220,
        // resizeMode: 'contain'
    },
    dotStyle: {
        width: setHW(12),
        height: setHW(12),
        borderRadius:  setHW(6),
        backgroundColor: 'rgba(255, 255, 255,.6)',
    },
    activeDotStyle: {
        backgroundColor: '#fff',
        width: setHW(12),
        height: setHW(12),
        borderRadius: setHW(6),
    }
});